<template>
    <t-checkbox-group
      ref="refComponent"
      label="测试"
      :helpConf="true"
      helpTooltip="我是提示"
      helpPlacement="right"
      helpMore="link"
      helpMoreLink="static"
      helpMoreLinkHrefStatic="https://www.baidu.com"
      helpMoreLinkHrefExp="https://www.qq.com"
      v-model="model"
      itemsDataSourceType="dynamic"
        displayField="label"
        valueField="value"
      :staticItems="[
        { label: '一', value: '1' },
        { label: '二', value: '2' },
        { label: '三', value: '3' },
      ]"
      :listDataSource="[
        { label: '4', value: '4' },
        { label: '5', value: '5' },
        { label: '6', value: '6' },
      ]"
        required
        required-message="评分是必填的哦"
    />
      <t-button @click="validate">点击校验</t-button>

    <!-- <t-checkbox-group
      label="动态数据源"
      :helpConf="true"
      helpTooltip="我是提示"
      helpPlacement="right"
      helpMore="link"
      helpMoreLink="static"
      helpMoreLinkHrefStatic="https://www.baidu.com"
      helpMoreLinkHrefExp="https://www.qq.com"
      v-model="model"
      itemsDataSourceType="dynamic"
      displayField="Name1"
      valueField="Code1"
      :staticItems="[
        { label: '1', value: '1' },
        { label: '2', value: '2' },
        { label: '3', value: '3' },
      ]"
      :listDataSource="[
        { label: '1', value: '1', Name1: 'name4', Code1: '4' },
        { label: '2', value: '2', Name1: 'name5', Code1: '5' },
        { label: '3', value: '3', Name1: 'name6', Code1: '6' },
      ]"
      :options="[
        { label: '11', value: '11' },
        { label: '22', value: '22' },
        { label: '33', value: '33' },
      ]"
      required
    />


  <t-checkbox-group
    label="动态数据源"
    :helpConf="true"
    helpTooltip="我是提示"
    labelPosition="left"
    :inline="true"
    helpPlacement="right"
    helpMore="link"
    helpMoreLink="static"
    helpMoreLinkHrefStatic="https://www.baidu.com"
    helpMoreLinkHrefExp="https://www.qq.com"
    v-model="model"
    itemsDataSourceType="dynamic"
    displayField="Name1"
    valueField="Code1"
    :staticItems="[
      { label: '1', value: '1' },
      { label: '2', value: '2' },
      { label: '3', value: '3' },
    ]"
    :listDataSource="[
      { label: '1', value: '1', Name1: 'name4', Code1: '4' },
      { label: '2', value: '2', Name1: 'name5', Code1: '5' },
      { label: '3', value: '3', Name1: 'name6', Code1: '6' },
    ]"
    :options="[
      { label: '11', value: '11' },
      { label: '22', value: '22' },
      { label: '33', value: '33' },
    ]"
    required
  /> -->
<form  @submit.prevent.stop="onSubmit">
<t-checkbox-group
      ref="nameRef"
      label="测试"
      :helpConf="true"
      helpTooltip="我是提示"
      helpPlacement="right"
      helpMore="link"
      helpMoreLink="static"
      helpMoreLinkHrefStatic="https://www.baidu.com"
      helpMoreLinkHrefExp="https://www.qq.com"
      v-model="model"
      itemsDataSourceType="static"
      inline
      :staticItems="[
        { label: '一', value: '1' },
        { label: '二', value: '2' },
        { label: '三', value: '3' },
      ]"
      :listDataSource="[
        { label: '4', value: '4' },
        { label: '5', value: '5' },
        { label: '6', value: '6' },
      ]"
        required
        required-message="评分是必填的哦"
    />
   <q-btn label="Submit" type="submit" color="primary" />
</form>
  <t-checkbox-group
      label="测试"
      :hideLabel="true"
      :helpConf="false"
      helpTooltip="我是提示"
      helpPlacement="right"
      helpMore="link"
      helpMoreLink="static"
      helpMoreLinkHrefStatic="https://www.baidu.com"
      helpMoreLinkHrefExp="https://www.qq.com"
      v-model="model"
      itemsDataSourceType="dynamic"
        displayField="label"
        valueField="value"
      :staticItems="[
        { label: '一', value: '1' },
        { label: '二', value: '2' },
        { label: '三', value: '3' },
      ]"
      :listDataSource="[
        { label: '4', value: '4' },
        { label: '5', value: '5' },
        { label: '6', value: '6' },
      ]"
    />
      <t-checkbox-group
      label="测试"
      :hideLabel="true"
      :helpConf="false"
      helpTooltip="我是提示"
      helpPlacement="right"
      helpMore="link"
      helpMoreLink="static"
      helpMoreLinkHrefStatic="https://www.baidu.com"
      helpMoreLinkHrefExp="https://www.qq.com"
      v-model="model"
      itemsDataSourceType="dynamic"
        displayField="label"
        valueField="value"
        inline
      :staticItems="[
        { label: '一', value: '1' },
        { label: '二', value: '2' },
        { label: '三', value: '3' },
      ]"
      :listDataSource="[
        { label: '4', value: '4' },
        { label: '5', value: '5' },
        { label: '6', value: '6' },
      ]"
    />
</template>

<script setup>
import { ref } from 'vue';
const model= ref([]);
 // 校验
  const refComponent = ref(null);
function validate() {
    refComponent.value.validate();
}
const nameRef = ref(null)
function onSubmit() {
nameRef.value.validate()
}
</script>
